﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script lang="javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script lang="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <style>
        body 
        {
            font-family:'Segoe UI';
            font-size:9pt;
        }
        .Box 
        {
            width:200px;
            height:20px;
            text-align:center;
            vertical-align:middle;
            padding:0px;
            margin-bottom: 1px;
            cursor: pointer;
            color:#fff;
        }

        .LogoBox 
        {
            width: 230px;
            text-align:center;
            margin-bottom: 1px;
            font-size: 30pt;
            float: left;
            margin-bottom:20px;
            color:#7db034
        }
        
        .SuccessHeader 
        {
            color:#487918
        }

        .FailureHeader 
        {
            color:#f81a1a;
        }
        
        .TestBox
        {
            background-color:#ff6a00;
            margin-left:20px;
        }
        .CategoryBox
        {
            background-color:#4d3589;
        }
        .Header 
        {
            font-size: 20pt;
            float:multicol;
            border-bottom: 1px solid black;
            margin-bottom:20px;
            text-align: left;
        }
        .SidePanel 
        {
            width:230px;
            float: left;
            margin-right: 5px;
            vertical-align:top;
            min-height: 300px;
        }
        .MessagePanel 
        {
            width:500px;
            float:left;
        }
        .FailStatusBox 
        {
            background-color:#f00;
            width: 10px;
            height:10px;
            margin-top:5px;
            margin-left:5px;
            margin-right:0px;
            border:1px solid black;
            float:left;
        }
        .Message 
        {
            color: black;
            border-bottom: 1px solid #ff6a00;
            margin-bottom: 10px;
            padding: 5px;
        }

        .MessageType
        {
            font-weight:bold;
            opacity:.5;
        }
        
        .InformationMessage 
        {
            background-color:#e2e2e2;
        }

        .ErrorMessage 
        {
            background-color:#ff9c9c;
        }

        .WarningMessage 
        {
            background-color: #fff2aa;
        }

        .MessagesHeader 
        {
            color:#4d3589;
            font-size:20pt;
            margin-bottom: 10px;
            opacity: .25;
            border-bottom: 1px solid #ff6a00;
            margin-bottom: 5px;
        }
        .Hidden
        {
            display:none;
        }
        .SubText 
        {
            font-style:italic;
            font-size:smaller;
        }
    </style>
    <div>
        <div class="LogoBox">Preflight</div>
        <div class="Header" id="headerBox">
            <span id="applicationName"></span><span id="failIndicator"></span><br /> 
            <div class="SubText">Version: <span id="applicationVersion"></span></div> 
        </div>
    </div>
    <div class="SidePanel" id="navPanel">
    </div>
    <div class="MessagePanel" id="verificationDetails">
        
    </div>
    <script id="categoryTemplate" type="text/x-jquery-tmpl">
        <div class='Box CategoryBox' onclick="toggleCategory('${ElementId}')">
            {{if hasFailedVerification($data)}} 
                <div class="FailStatusBox"></div>
            {{/if}}
            ${Name}</div>
        <div id="${ElementId}" class="Hidden">
            {{each Verifications}}<div class="Box TestBox" onclick="showVerificationDetail('${$data.Name}', '${Name}')">
                {{if !Passed}} 
                    <div class="FailStatusBox"></div>
                {{/if}}
                ${Name}</div>{{/each}}
        </div>
    </script>

    <script id="verificationTemplate" type="text/x-jquery-tmpl">
        <div class="MessagesHeader">${Name} 
            {{if Passed}} 
                (Passed)
            {{else}}
                (Failed)
            {{/if}}</div><br />

        {{each Messages}}
            <div class="Message ${Type}Message">
                <span class="MessageType">${Type}</span><br />
                ${Content}
            </div>
        {{/each}}
    </script>
    <script id="headerTemplate" type="text/x-jquery-tmpl">
        <div class="MessagesHeader">${Name} 
            {{if Passed}} 
                (Passed)
            {{else}}
                (Failed)
            {{/if}}</div><br />

        {{each Messages}}
            <div class="Message ${Type}Message">
                <span class="MessageType">${Type}</span><br />
                ${Content}
            </div>
        {{/each}}
    </script>
    <script lang="javascript">

        //<<JSON>>

        var verificationLookup = new Array();
        var categoryLookup = new Array();

        for (var itemIndex in cts.Categories) {
            var categoryItem = cts.Categories[itemIndex];
            categoryItem.ElementId = "cat_" + itemIndex;

            for (var verificationIndex in categoryItem.Verifications) {
                var verificationItem = categoryItem.Verifications[verificationIndex];
                var key = createVerificationKey(categoryItem.Name, verificationItem.Name);
                verificationLookup[key] = verificationItem;
            }
        }

        function toggleCategory(id) {
            $('#' + id).slideToggle('fast', function () { });
            clearMessages();
        }

        function showVerificationDetail(categoryName, verificationName) {
            var verificationKey = createVerificationKey(categoryName, verificationName);
            var verification = verificationLookup[verificationKey];
            var items = new Array(1);
            items[0] = verification;
            clearMessages();
            $("#verificationTemplate").tmpl(items).appendTo("#verificationDetails");
        }

        function clearMessages() {
            $("#verificationDetails").empty();
        }

        function createVerificationKey(categoryName, verificationName) {
            return categoryName + '_' + verificationName;
        }

        function hasFailedVerification(category) {
            for (var i in category.Verifications) {
                if (!category.Verifications[i].Passed) {
                    return true;
                }
            }

            return false;
        }

        $(document).ready(
            function () {
                $("#applicationName").text(cts.Description.Name);
                $("#applicationVersion").text(cts.Description.Version);
                var passFailIndicatorClass = cts.Passed ? "SuccessHeader" : "FailureHeader";
                var failMessage = cts.Passed ? "" : "(Failed)";
                $("#failIndicator").text(failMessage);
                $("#headerBox").toggleClass(passFailIndicatorClass);
                $("#categoryTemplate").tmpl(cts.Categories).appendTo("#navPanel");
            });
    </script>
</body>
</html>